<template>
    <div class="app-container form-wrapper">
        <sticky :height="50" :z-index="10" class-name="sub-navbar" :sticky-top="92">
            <el-button-group>
                <el-button v-for="(item, index) in buttonList" :key="index" :type="item.colorType" :icon="item.icon" @click="handleButtonClick(item)">{{ item.buttonName }}</el-button>
            </el-button-group>
        </sticky>
        <form-container
            :true-show-column="trueShowColumn"
            :form-data="formData"
            :form-id="formId"
            @form-change="handleFormChange"
            :rules="rules"/>
    </div>
</template>

<script>
import { cardformInitData, queryCardFormColumnsWithUserId, queryCardFormButtonsWithUserId } from '@/api/api'
// eslint-disable-next-line
import { setDefaultValue, dateFormat, getInitFilterParam, refreshDictCache } from '@/common/utils/formCommon.js'
import formContainer from '@/components/form/form-container'
import Sticky from '@/components/Sticky'
const validateFun = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        callback()
    }
}
const validateUniqueVerify = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('不唯一'))
    } else {
        callback()
    }
}
export default {
    name: 'card689',
    components: { formContainer, Sticky },
    props: {
        value: Object,
        compParams: Object
    },
    data() {
        return {
            formId: '689',

            formData: {},
            checkValue: true,
            queryParam: this.$route.query, // 页面请求参数
            filterConfig: [
                {
                    paramType: 'parameter',
                    paramValue: 'EMPEMPLOYEEREG_ID',
                    paramName: 'EMPEMPLOYEEREG_ID'
                }
            ],
            dataColumn: [],
            trueShowColumn: {},
            // 表单验证规则
            rules: {
            },
            selectdata: [],
            // 字段权限控制
            fieldValid: {},
            buttonValid: {},
            buttonList: [
                { buttonName: '编辑', icon: 'el-icon-plus', buttonId: 2414, colorType: 'primary' },
                { buttonName: '新增', icon: 'el-icon-search', buttonId: 2414, colorType: 'primary' },
                { buttonName: '删除', icon: 'el-icon-delete', buttonId: 2414, colorType: 'primary' },
                { buttonName: '查看', icon: 'el-icon-plus', buttonId: 2414, colorType: 'primary' },
                { buttonName: '下载', icon: 'el-icon-download', buttonId: 2414, colorType: 'primary' }
            ]
        }
    },
    watch: {
        formData: function(newVal, oldVal) {
            console.log(newVal)
            console.log(oldVal)
        }
    },
    async created() {
        this.dataColumn = await import('./index.json')
        this.trueShowColumn = await this._.groupBy(this.dataColumn, 'formGroupId')
        console.log(this.trueShowColumn)
        this.formatRule()
        if (this.value !== undefined) {
            this.formData = this.value
        }

        var result = getInitFilterParam(this.queryParam, this.compParams, this.filterConfig)
        console.log(result, '过滤条件')
        const isInit = this.queryParam.isInit
        if (isInit === 'true') { // 编辑
            this._cardformInitData(result)
        } else {
            for (var i = 0; i < this.dataColumn.length; i++) {
                // 加载默认值
                this.setTextBoxDefaultValue(i)
            }
        }
        this._queryCardFormColumnsWithUserId()
        this._queryCardFormButtonsWithUserId()
    },
    methods: {
        handleFormChange(e) {
            console.log(e)
            this.$eventBus.$emit('card689emit', e)
        },
        // 添加验证规则
        formatRule() {
            this.dataColumn.forEach(item => {
                this.rules[item.columnId] = []
                if (item.formColumnRequired === 'Y') {
                    const ruleItem = { required: true, message: item.columnName + '是必须的', trigger: 'blur' }
                    this.rules[item.columnId].push(ruleItem)
                }
                var type = item.columnTypeDetail.textboxCheckType
                switch (type) {
                    // eslint-disable-next-line
                    case 'int':
                        let ruleItem = { type: 'integer', message: item.columnName + '必须为整数', trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'float':
                        ruleItem = { type: 'float', message: item.columnName + '必须为实数', trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'naturalNumber':
                        ruleItem = { pattern: /^[\+]?(([1-9]\d*)|\d)$/, message: item.columnName + '必须为自然数', trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'letter':
                        ruleItem = { pattern: /^[A-Za-z]+$/, message: item.columnName + '必须为英文字母', trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'engnum':
                        ruleItem = { pattern: /^[A-Za-z0-9]+$/, message: item.columnName + '必须为英文和数字', trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'email':
                        ruleItem = { type: 'email', message: item.columnName + '必须为邮件', trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'zh':
                        ruleItem = { pattern: /^[\u4e00-\u9fa5]{0,}$/, message: item.columnName + '必须为汉字', trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'url':
                        ruleItem = { type: 'url', message: item.columnName + '必须为网址', trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'chinaZipcode':
                        ruleItem = { pattern: /[1-9]\d{5}(?!\d)/, message: item.columnName + '必须为邮政编码', trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'phone':
                        ruleItem = { pattern: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/, message: item.columnName + '必须为电话号码', trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'chinaMobile':
                        ruleItem = { pattern: /^1[3456789]\d{9}$/, message: item.columnName + '必须为手机号码', trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'chinaIDNo':
                        ruleItem = { pattern: /^\d{15}|\d{18}$/, message: item.columnName + '必须为身份证号码', trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'IP':
                        ruleItem = { pattern: /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/, message: item.columnName + '必须为IP', trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'uniqueVerify':
                        ruleItem = { validator: validateUniqueVerify, trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    case 'fun':
                        ruleItem = { validator: validateFun, trigger: 'blur' }
                        this.rules[item.columnId].push(ruleItem)
                        break
                    default:
                        break
                }
            })
        },
        _cardformInitData(result) {
            const params = { formId: this.formId, pkId: '', 'containerParam': {}, 'paramsMap': {}, 'requestParam': result }
            cardformInitData(params)
                .then((res) => {
                    if (res) {
                        if (res.rows[0]) {
                            const object = res.rows[0]
                            for (const key in object) {
                                if (object.hasOwnProperty(key) && object[key] !== null) {
                                    const element = object[key]
                                    object[key] = element + ''
                                }
                            }
                            this.formData = res.rows[0]
                            console.log(this.formData, '回显数据')
                            this.$eventBus.$emit('onLoadData', this.formId, this.formData, result, '0000')
                        } else {
                            this.$eventBus.$emit('onLoadData', this.formId, this.formData, result, '9999')
                        }
                    } else {
                        this.$emit('onLoadData', this.formId, this.formData, result, '9999')
                    }
                })
        },
        // 查询字段权限
        _queryCardFormColumnsWithUserId() {
            queryCardFormColumnsWithUserId(this.formId)
                .then((res) => {
                    console.log(res)
                    if (res) {
                        const temp = {}
                        res.forEach((item) => {
                            temp[item.formEntityTablename.replace(/_/g, '') + '_' + item.formFieldTablename.toUpperCase()] = item.formColumnType
                        })
                        console.log(temp)
                        this.fieldValid = temp
                    }
                })
        },
        // 查询按钮权限
        _queryCardFormButtonsWithUserId() {
            console.log('queryCardButtonValid')
            queryCardFormButtonsWithUserId(this.formId)
                .then((res) => {
                    if (res) {
                        const temp = {}
                        res.forEach(item => {
                            temp[item.formButtonCode] = item.powerType
                        })
                        this.buttonValid = temp
                    }
                })
        },
        setTextBoxDefaultValue(i) {
            var formThis = this
            setDefaultValue(i, formThis)
        },
        handleButtonClick(item) {
            console.log(item)
        }
    }
}
</script>
